<template>
  <section class="teacircle-main-circle-item">
      <section class="item-media">
          <section class="thumb">
              <img :src="newCircle.thumb" alt="">
          </section>
          <section class="name-time">
              <h4 class="name">{{newCircle.name}}</h4>
              <section class="time">{{newCircle.time}}</section>
          </section>
          <section class="attend">
              <span>+ 关注</span>
          </section>
      </section>
      <p class="item-artical">{{newCircle.text}}</p>
      <ul class="item-print">
          <li is="my-li" v-for="(item,index) in newCircle.drawing"
          :circleItem="item" 
          :key="index"></li>
      </ul>
      <section class="item-discount">
          <span class="comment"><img src="./comment.png" alt=""></span><span class="heart"><i class="fa fa-heart-o"></i></span>
      </section>
      <bar/>
  </section>
</template>
<script>
import circleItem from "./circleItem/circleItem";
import bar from "../../../components/bar/bar";
export default {
  props:['new-circle'],
  components:{
      myLi:circleItem,
      bar,
  }
}
</script>
<style lang="scss">
@import "../../../assets/scss/_index.scss";
.teacircle-main-circle-item{
    .item{
        &-media{
            display: flex;
            .thumb{
                width: px2rem(156);
                height: px2rem(156);
                img{
                    width: 100%;
                }
            }
            .name-time{
                margin-left: px2rem(43);
                .name{
                    font-size: px2rem(30);
                    color: #333333;
                }
                .time{
                    margin-top: px2rem(20);
                    font-size: px2rem(24);
                    color: #8f8f8f;
                }
            }
            .attend{
                flex-grow: 2;
                text-align: right;
                margin-right: px2rem(13);
                span{
                    display: inline-block;
                    width: px2rem(102);
                    height: px2rem(42);
                    background: $basic-color;
                    color: #fff;
                    font-size: px2rem(26);
                    text-align: center;
                    line-height: px2rem(42);
                }
            }
        }
        &-artical{
            margin-top: px2rem(28);
            font-size:px2rem(24);
            color:#787878;
            line-height: px2rem(32);
        }
        &-print{
            display: flex;
            justify-content: space-between;
            margin-top: px2rem(24);
        }
        &-discount{
            display: flex;
            justify-content: flex-end;
            margin-right: px2rem(16);
            .comment{
                display: inline-block;
                width: px2rem(27);
                height: px2rem(27);
                margin-right: px2rem(26);
                img{
                    width: 100%;
                }
            }
            .heart{
                i{
                    font-size: px2rem(27);
                    color:#b5b5b5;
                }
            }
        }
    }
    
}
</style>
